<template>
    <div class="big">
        <div class="backgrounds animate__animated animate__fadeIn"></div>
        <div class="titles animate__animated animate__backInDown">
            <p>测试网站</p>
        </div>
        <div class="btns">
            <router-link class="links" to="/home/index">
                <el-button type="success"
                  class=" button1 btn animate__animated animate__fadeInLeftBig">
                    已开荒的一些小东西
                </el-button>
            </router-link>
            <el-button type="success" class=" button2 btn animate__animated animate__fadeInRightBig">尚未开荒</el-button>
        </div>
    </div>
</template>

<script>
    export default {
        name: "index",
        components:{

        },
        mounted() {

        }
    }
</script>

<style scoped>
    .big{
        width: 100%;
        height: 100%;
        /*background-color: #666666;*/
        position: absolute;
    }
    .links{
        text-decoration: none;
        color: white;
    }
    .backgrounds{
        background-image: url("../assets/imgs/back.gif");
        background-size: 100% 100%;
        background-attachment: fixed;
        background-repeat:no-repeat;
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: -1;
        animation-duration: 3s;
    }
    .titles{
        position: relative;
        top: 20%;
        animation-delay: 1s;
    }
    .titles p{
        font-family: "Arial";
        font-size:3.5em ;
        text-align: center;
        /*color: lightsteelblue;*/
        color: snow;
    }
    .btns{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: 80%;
        z-index: 99;
    }
    .btn{
        width: 200px;
        height: 60px;
    }
    .button1{
        /*margin-right: 25em;*/
    }
    .button2{
        margin-left: 25em;
    }
</style>